<template>
   <el-container class="content" v-loading="loading">
       <div class="content_wrap" >
       <el-steps :space="200" :active="activeName" finish-status="success" simple>
            <el-step title="填写注册">
               
            </el-step>
            <el-step title="邮箱验证">
              
            </el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        <div class="regView">
           
            
            <el-form v-if="activeName==0" :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="头像" prop="avatar">
                  <el-upload
                    class="avatar-uploader"
                    action="/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="form.avatar" :src="form.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
                </el-form-item>
                <el-form-item label="昵称" prop="nike">
                  <el-input v-model="form.nike" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="username">
                  <el-input v-model.number="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                  <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                  
                </el-form-item>
            </el-form>
            <avue-login v-if="activeName==1" v-model="form" :option="option2" @submit="submit" @send="send"></avue-login>
            <span v-if="activeName==2"> 恭喜你注册成功，3s后跳转</span>
        </div>
       </div>
   </el-container>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class Register extends Vue{
    activeName=0
    loading=false
    form={
       nike:"",
       username:'',
       password:"",
       checkPass:"",
       avatar:"",
       email:""
    }
    isCode=false
    option2={
        width: 400,
        time: 60,
        codeType: 'phone',
        column: {
          username: {
            label: '邮箱',
            prop:"email",
            prefixIcon: 'el-icon-mobile-phone',
            placeholder: '邮箱',
            autocomplete: 'off',
            rules: [{required: true, message: '请输验证码', trigger: 'blur'},
                  {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                ]
          },
          password: {
            hide: true,
          },
          code: {
            label: '验证码',
            prop:"code",
            autocomplete: 'off',
            rules: { required: true, message: '请输验证码', trigger: 'blur' }
          }
        }
      }
     validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
         
          callback();
        }
      }
      validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
    }
    rules= {
          password: [
            { validator: this.validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: this.validatePass2, trigger: 'blur' }
          ],
          nike: [
            { required: true, message: '请输入昵称', trigger: 'blur' }
            
          ],
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { type: 'number', message: '账号必须为数字'}
          ]
    }
    handleAvatarSuccess(res, file) {
        
        this.form.avatar = res;
        this.loading=false
    }
    async submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            if(this.form.avatar==""){
                this.$message.error('上传头像');
                return;
            }
            const data=await this.$httpajax.get(`auth/UsernameIsExit/${this.form.username}`)
            if(data.data.code==100){
                  this.$message({
                    type: 'warning',
                    message: '用户名存在!'
                  });
                  return;
            }
            this.activeName=1
            //const res=await this.$httpajax.post("auth",this.form)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG和png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        this.loading=true;
        return isJPG && isLt2M;
    }

    async send(done,form) {
      //const res=await this.$httpajax.get("code/CreateCode") 
    
     
      if(!this.isCode){
        await this.$httpajax.get("code/CreateCode/"+$(".el-input__inner").eq(0).val()) 
        this.$message.success('验证码发送成功')
        this.isCode=true
        
        setTimeout(()=>{
          this.isCode=false
        },60000)
        done();
      }
    }
    async submit(form) {
      
       const res=await this.$httpajax.get("code/CheckCode/"+form.code) 
       console.log(res)
       if(res.data.statucode==200&&res.data.isSame){//&&res.isSame
            this.form.email=form.email
            const res=await this.$httpajax.post("auth",this.form) 
           if(res.status==201){
               this.activeName=2
               setTimeout(()=>{

                  this.$router.push("/")
               },3000)
           }
       }else{
          this.$message.warning("验证码不正确")
       }
    }
}
</script>
<style lang='less' scoped>
@AvatarWidth:100px;
.content{
    display:flex; 
    min-width:1200px;
    justify-content: center;
    .content_wrap{
        width:60%;
        margin-top:5%;
        .regView{
            width:50%;
            margin-top:5%;
            margin-left:20%;
           
            .avatar-uploader{
                width: @AvatarWidth;
                height: @AvatarWidth;
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                &:hover {
                    border-color: #409EFF;
                }
            }
      
            

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: @AvatarWidth;
                height: @AvatarWidth;
                line-height: @AvatarWidth;
                text-align: center;
            }
            .avatar {
                width: @AvatarWidth;
                height: @AvatarWidth;
                display: block;
            }
        }

        
    }
}
</style>